<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">消息</view>
			</block>
		</cu-custom>
		<view class="padding-top padding-left-32 padding-right-32">
			<view class="flex text-center">
				<view class="flex-sub" @tap="change(1)">
					<text :class="TabCur==1?'sel':'unsel'">未读通知</text>
				</view>
				<view class="flex-sub" @tap="change(2)">
					<text :class="TabCur==2?'sel':'unsel'">已读通知</text>
				</view>
			</view>
			<view class="margin-top-48 flex align-center justify-between">
				<view class="text-767879 text-sm">共{{total}}条未读通知</view>
				<view v-if="TabCur==1" @click="readAll()"><text class="all-red">全部已读</text></view>
			</view>
			<view class="margin-top-48">
				<view class="flex align-center justify-start padding-bottom-32 solid-bottom margin-bottom-32"
					v-for="(item,index) in List" :key="index" @click="toNoticeInfo(index)">
					<view>
						<image
							:src="item.type==1?'https://txr001.zthj.net/static/img/xttz.png':'https://txr001.zthj.net/static/img/hdtz.png'"
							class="img-64"></image>
					</view>
					<view class="padding-left-24 flex-sub">
						<view class="text-0101 text-lg">系统通知</view>
						<view class="text-b2b6b8 text-sm text-cut padding-top-8">{{item.title ? item.title : item.memo}}</view>
					</view>
					<view class="text-right">
						<view class="text-767879 text-sm">{{item.retime}}</view>
						<view v-if="TabCur==1" class="unread-content"></view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 1,
				List: [],
				total:0
			}		
		},
		onShow(){
			this.getInfo();
		},
		methods: {
			async getInfo() {
				let res;
				if(this.TabCur == 1){
					 res = await this.$api.unread();
					 this.total = res.length;
				}else{
					res = await this.$api.read();
				}
				this.List = res;
			},
            async readAll(){
                await this.$api.readAll();
                uni.showToast({icon:'success', title: '已完成'})
                this.getInfo();
            },
			change(TabCur){
				this.TabCur  = TabCur;
				this.getInfo();
			},
			toNoticeInfo(index) {
                if(this.List[index].type == 'bind_staff'){
                    uni.navigateTo({
                        url: '/subpackage/pages/voucher/bindingApplication?id=' + this.List[index].value
                    })
                    return;
                }

				
				uni.navigateTo({
					url: "/pages/index/noticeInfo?id=" +  this.List[index].id+"&is_read="+this.TabCur
				})
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped>
	.sel {
		/* width: 160rpx; */
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 16rpx;
		background: #010101;
		border-radius: 30rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
	}

	.unsel {
		font-size: 32rpx;
		font-weight: 600;
		color: #010101;
	}

	.all-red {
		font-size: 24rpx;
		font-weight: 400;
		color: #767879;
		border-bottom: 2rpx solid #767879;
	}

	.unread-content {
		width: 16rpx;
		height: 16rpx;
		background: #E2323C;
		border-radius: 100%;
		float: right;
		margin-top: 14rpx;
	}
</style>